<template>
  <vxe-modal
    title="办理任务"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" height="87vh" showFooter esc-closable show-zoom resize>

    <div style="height: 52vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">成果基本资料</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  成果名称：
                </div>
              </template>
              {{ jdsqData.cgName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目编号：
                </div>
              </template>
              {{ jdsqData.xmBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目归属：
                </div>
              </template>
              {{ jdsqData.xmGs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请类别：
                </div>
              </template>
              {{ jdsqData.sqLb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请鉴定单位：
                </div>
              </template>
              {{ jdsqData.sqJdDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请鉴定时间：
                </div>
              </template>
              {{ jdsqData.sqJdTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  主要完成人：
                </div>
              </template>
              {{ jdsqData.zyWcr }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  主要完成单位：
                </div>
              </template>
              {{ jdsqData.zyWcDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  专业领域：
                </div>
              </template>
              <dict-tag :options="dict.type.kylx_ssly" :value="jdsqData.zyLy"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  经济效益：
                </div>
              </template>
              {{ jdsqData.jjXy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目起止年月：
                </div>
              </template>
              {{ jdsqData.xmQTime  + ' 至 ' + jdsqData.xmZTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目负责人：
                </div>
              </template>
              {{ jdsqData.xmFzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  联系电话：
                </div>
              </template>
              {{ jdsqData.lxDh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  鉴定等级：
                </div>
              </template>
              {{ jdsqData.jdDj }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  通讯地址：
                </div>
              </template>
              {{ jdsqData.txDz }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 技术资料目录 -->
        <el-card class="box-card" shadow="hover" style="min-height: 40vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">技术资料目录</span>
          </div>
            <el-row :gutter="20">
              <el-col :span="4" :xs="24">
                <div class="head-container">
                  <el-tree
                    :data="fileOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                    :render-content="renderContent"
                  />
                </div>
              </el-col>
              <el-col :span="20" :xs="24">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button type="success" icon="el-icon-download" sizi="mini" @click="handleDownloadAll">全部下载
                    </el-button>
                  </el-col>
                </el-row>
                <el-table v-loading="loadingFj" height="36vh"
                          :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                          :data="jdysJdsqFjList"
                          ref="jdysJdsqFj">
                  <el-table-column label="序号" align="center" type="index" width="50"/>
                  <el-table-column label="附件类型" align="center" prop="fileType"/>
                  <el-table-column label="文件名称" align="center" prop="fileName" :formatter="getFileNames"/>
                  <el-table-column label="文件大小" align="center" prop="fileSize"/>
                  <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-download"
                        @click="handleDownload(scope.row)"
                      >下载
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>

              </el-col>
            </el-row>
        </el-card>
        <br>
        <!-- 研究人员名单 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">研究人员名单</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="jdysJdsqYjryList" ref="jdysJdsqYjry">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column show-overflow-tooltip label="姓名" align="center" prop="name" width="100"/>
            <el-table-column show-overflow-tooltip label="年龄" align="center" prop="age" width="70"/>
            <el-table-column show-overflow-tooltip label="职务" align="center" prop="zhiWu"/>
            <el-table-column show-overflow-tooltip label="职称" align="center" prop="zhiChen">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.rcpt_zc" :value="scope.row.zhiChen"/>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="专业" align="center" prop="zy"/>
            <el-table-column show-overflow-tooltip label="本课题中分工" align="center" prop="bKtFg"/>
            <el-table-column show-overflow-tooltip label="投入课题工作总月数" align="center" prop="trZys"/>
            <el-table-column show-overflow-tooltip label="工作单位" align="center" prop="gzDw"/>
          </el-table>
        </el-card>

      </el-card>
    </div>
    <el-divider></el-divider>

    <el-card shadow="never">
      <el-form label-width="100px">
        <el-form-item label="审核状态：">
          <el-radio label="1" v-model="submitType">同意</el-radio>
          <el-radio label="2" v-model="submitType">驳回</el-radio>
          <el-select remote v-if="submitType==='2'" v-model="denyTo" placeholder="驳回到：" @visible-change="selectBefore">
            <el-option
              v-for="item in beforeData"
              :key="item.dkey"
              :label="item.taskName"
              :value="item.dkey">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核意见：">
          <el-input type="textarea" v-model="comment"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button type="primary" @click="onSubmit()">提交</el-button>
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import { fallBackTaskByTaskDefinitionKey, passTask, selectBefore, selectHistory} from "@/api/activiti/task"
import {getJdsq, selectJdsqFjList, selectJdysJdsqYjryByJdsqId} from "@/api/xmgl/jdys/jdsq";
import JSZip from "jszip";

export default {
  name: "JdSqSq", //鉴定申请审批界面
  dicts: ['rcpt_zc', 'dwlb', 'kylx_ktgs', 'jdsq_sqlb', 'kylx_ssly',],
  data() {
    return {
      jdsqFileType: "技术成果报告", //默认的附件类型
      // 鉴定申请附件表格数据
      jdysJdsqFjList: [],
      // 研究人员名单表格数据
      jdysJdsqYjryList: [],
      loadingFj: false,
      defaultProps: {children: "children", label: "label"}, // 表单参数
      fileOptions: [{ //附件类型树表
        id: 1,
        label: '技术成果报告',
      }, {
        id: 2,
        label: '综合证明材料',
        children: [{
          id: 3,
          label: '查新检索报告书',
        }, {
          id: 4,
          label: '应用证明',
        }, {
          id: 5,
          label: '经济效益证明',
        }, {
          id: 6,
          label: '知识产权',
        }, {
          id: 7,
          label: '已获奖励',
        }, {
          id: 8,
          label: '发表论文',
        }, {
          id: 9,
          label: '申请表及相关',
        }]
      }, {
        id: 10,
        label: '科技成果鉴定证书初稿',
      }, {
        id: 11,
        label: '科技成果鉴定证书终稿',
      }, {
        id: 12,
        label: '验收资料',
      }],
      loading: false,
      jdsqData: [], //合同基本信息与附件信息
      jdsqId: null, //合同主键ID
      beforeData: [],
      beforeDataLoading: false,
      denyTo: null,
      dialogVisible: false,
      rowData: null,
      submitType: "1",//默认同意
      comment: null,//审批意见
      businessData: null,//业务数据
      historyList: [],//历史信息
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
      // 附件查询参数
      queryParamsFj: {
        pageNum: 1,
        pageSize: 100,
        jdsqId: null,
        fileType: null,
        fileName: null,
        fileSize: null
      },
    };
  },
  created() {
  },
  methods: {
    //附件打包下载
    async handleDownloadAll() {
      const zip = new JSZip();

      getJdsq(this.jdsqId).then(async res => {
        let fileList = res.data.jdysJdsqFjList;
        if (fileList.length === 0) {
          this.$modal.alertWarning("没有相关附件, 请先上传文件");
        } else {
          // 打开遮罩层
          this.$modal.loading("正在打包文件，请稍后...");
          for (let i = 0; i < fileList.length; i++) {
            const file = fileList[i];
            const fileName = file.fileName;
            const finalFileName = fileName.substring(fileName.lastIndexOf('/') + 1);

            const fileResponse = await fetch(`/dev-api${fileName}`);
            const blob = await fileResponse.blob();
            zip.file(finalFileName, blob);
          }
          const content = await zip.generateAsync({type: 'blob'});
          saveAs(content, `${res.data.cgName}_(附件).zip`);
          this.$modal.closeLoading();// 关闭遮罩层
        }
      })
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      this.loadingFj = true
      if (node.level > 0 && node.data.children && node.data.children.length > 0) { // 检查是否有子节点
        const firstChildNode = node.data.children[0]; // 获取第一个子节点
        this.$refs.tree.setCurrentKey(firstChildNode.id); // 设置当前选中的节点为第一个子节点
        data = firstChildNode; // 更新 data 为第一个子节点的数据
        this.jdsqFileType = data.label
        this.queryParamsFj.fileType = this.jdsqFileType
        selectJdsqFjList(this.queryParamsFj).then(resFileList => {
          this.jdysJdsqFjList = resFileList.rows;
          this.loadingFj = false
        })
      } else {
        //根据附件类型查询附件列表
        this.jdsqFileType = data.label
        this.queryParamsFj.fileType = this.jdsqFileType
        selectJdsqFjList(this.queryParamsFj).then(resFileList => {
          this.jdysJdsqFjList = resFileList.rows;
          this.loadingFj = false
        })
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.rowData = row
      this.loading = true;
      this.jdsqId = row.businessKey
      this.dialogVisible = true
      this.getJdsqData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getJdsqData() {
      const jdsqId = this.jdsqId
      getJdsq(jdsqId).then(res => {
        this.jdsqData = res.data
      })
      this.queryParamsFj.jdsqId = jdsqId
      this.queryParamsFj.fileType = this.jdsqFileType
      selectJdsqFjList(this.queryParamsFj).then(resFileList => {
        this.jdysJdsqFjList = resFileList.rows;

        //点击树表第一个节点
        this.$nextTick(() => {
          const firstNode = this.$refs.tree.store.nodesMap['1']; // 默认点击id为1的节点
          if (firstNode) {
            this.$refs.tree.setCurrentKey(firstNode.key);
            this.handleNodeClicks(firstNode.data);
          }
        });
      })
      selectJdysJdsqYjryByJdsqId(jdsqId).then(res => {
        this.jdysJdsqYjryList = res.data.jdysJdsqYjryList;
      })
    },
    handleNodeClicks(data) {
      this.loadingFj = true
      this.jctbFileType = data.type
      this.queryParamsFj.fileType = this.jdsqFileType
      selectJdsqFjList(this.queryParamsFj).then(resFileList => {
        this.jdysJdsqFjList = resFileList.rows;
        this.loadingFj = false
      })
    },
    //获取之前的节点信息
    selectBefore(visible){
      //console.log(this.rowData.taskId, "======selectBefore")
      if (visible) {
        this.beforeDataLoading = true;
        this.denyTo = null;
        this.beforeData = [];
        selectBefore({taskId: this.rowData.taskId,
          comment: this.comment,
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId}).then(res => {
          console.table(res);
          setTimeout(() => {
            this.beforeData = res.data;
            this.beforeDataLoading = false;
          }, 100); // 模拟异步加载数据
          //this.$options = res.data
        })
      }
    },
    clickTab(tab, event) {
      if (tab.name === 'history') {
        this.getSelectHistory()
      }
    },
    //获取历史记录
    getSelectHistory() {
      selectHistory({processInstanceId: this.rowData.processInstanceId}).then(res => {
        this.historyList = res.data
      })
    },
    //提交
    onSubmit() {
      if (!this.submitType) {
        this.$message.warning("请选择提交类型")
        return
      }
      if (!this.comment) {
        this.$message.warning("请输入审批意见")
        return
      }
      if (this.submitType == 1) {
        console.log(this.rowData, '1111111111111111111111111111111')
        //审核通过
        passTask({
          taskId: this.rowData.taskId,
          comment: this.comment,
          params: {
            // day: this.businessData.qingJiaDay
          },
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId
        }).then(res => {
          this.dialogVisible = false
          this.$emit('ok')
        })
      }
      //任务驳回
      if (this.submitType == 2) {
        console.log("nnnnnnnnn"+this.denyTo);
        //审核不通过
        fallBackTaskByTaskDefinitionKey({
          comment: this.comment,
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId,
          taskId: this.rowData.taskId,
          taskDefinitionKey:this.denyTo
        }).then(res => {
          console.log(res, "[[[[")
          this.dialogVisible = false
          this.denyTo = null;
          this.beforeData =[];
          this.$emit('ok')
        })
      }
    },

  }
};
</script>

<style scoped>
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #cddbeb !important;
}
</style>
